<template>
    <div class="code-source">
        <el-tabs v-model="active">
            <el-tab-pane label="data" name="data"></el-tab-pane>
            <el-tab-pane label="methods" name="methods"></el-tab-pane>
            <el-tab-pane label="mounted" name="mounted"></el-tab-pane>
            <el-tab-pane label="created" name="created"></el-tab-pane>
        </el-tabs>

        <template v-for="(item,index) in com">
            <div :key="index" style="height: 100%">
                <div class="editor" v-if="active === item">
                    <div class="editor-methods" v-if="item === 'methods'">
                        <el-button size="mini" type="primary" @click="addMethods">添加方法</el-button>
                    </div>

                    <template v-if="item === 'methods'">
                        <el-collapse v-model="activeName">
                            <template v-for="(it,ix) in pageScript[item]">
                                <el-collapse-item :name="ix">
                                    <template slot="title">&nbsp;&nbsp;&nbsp;{{ it.funName }}</template>
                                    <div class="methods">
                                        <span>
                                            方法名：
                                            <el-tooltip effect="light"
                                                        content="arguments 为方法形参名">
                                                <i class="el-icon-info"></i>
                                             </el-tooltip>
                                        </span>
                                        <el-input size="mini"
                                                  style="width: 75%"
                                                  @input="v=>pageScript[item][ix].funName = v"
                                                  :value="it.funName">
                                        </el-input>
                                        &nbsp;&nbsp;
                                        <el-button size="small" type="text" icon="el-icon-delete"
                                                   @click="delFun(ix)"></el-button>
                                    </div>
                                    <code-editor @input="v=>pageScript[item][ix].funBody = v"
                                                 :value="it.funBody"
                                                 :key="it.funName"
                                                 :mode="'javascript'"
                                                 :ref="it.funName">
                                    </code-editor>
                                </el-collapse-item>
                            </template>
                        </el-collapse>
                    </template>
                    <template v-else>
                        <code-editor @input="v=>pageScript[item] = v"
                                     :value="pageScript[item]"
                                     :mode="'javascript'"
                                     :ref="item">
                        </code-editor>
                    </template>
                </div>
            </div>
        </template>
    </div>
</template>

<script>

import CodeEditor from "@/components/code-editor/index.vue";

export default {
    name: "code-source",
    components: {CodeEditor},
    props: {
        designer: Object
    },
    data() {
        return {
            active: "data",

            com: ["data", "methods", "mounted", "created"],

            activeName: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20],
        }
    },
    computed: {
        pageScript() {
            return this.designer.pageScript;
        }
    },
    methods: {
        delFun(index) {
            let ps = JSON.parse(JSON.stringify(this.designer.pageScript));
            this.designer.pageScript = {};
            ps.methods.splice(index, 1);

            this.designer.pageScript = ps;
        },
        addMethods() {
            this.pageScript.methods.push({funName: "", funBody: ""})
        },
    }
}
</script>

<style lang="scss" scoped>
.code-source {
  width: 100%;
  //height: 100%;

  .editor {
    width: 100%;
    margin-bottom: 20px;

    > p {
      color: #909399;
      background: #f4f4f5;
      text-indent: 35px;
      font-weight: bold;
      line-height: 30px;
    }

    .editor-methods {
      width: 100%;
      height: 35px;
      box-sizing: border-box;
      padding: 5px;
    }

    .methods {
      display: flex;
      flex-direction: row;
      justify-content: flex-start;
      padding: 5px;
      font-size: 12px;
      line-height: 28px;
    }
  }

  ::v-deep.el-tabs {
    .el-tabs__content {
      height: 5px;
    }
  }
}
</style>
